<!DOCTYPE html>
<!-- saved from url=(0062)http://www.zurb.com/playground/jquery-text-change-custom-event -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
					<title>jQuery Text Change Event - ZURB Playground - ZURB.com</title>
				
		<meta name="description" content="Simple cross browser detection of text changes for input and textarea elements using a jQuery custom event plugin by ZURB">
		<meta name="keywords" content="JavaScript, jQuery, plugin, custom event, text change detection, change event, jQuery plugin , thought, idea, resources, concept, words, definition, zurbword, wiki, information, zurb, design strategy, inteaction design, UI">
		
		<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=1;">
		<link rel="apple-touch-icon" href="http://www.zurb.com/iphone.png">
		
		<meta name="author" content=" ZURB, inc.">
		<meta name="copyright" content="ZURB, inc. Copyright (c) 2012">
		<meta name="verify-v1" content="FIGJ61mNGm8gsksgklVzG71j7+Q0u6zTDF+VE9vA/8k=">
		
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="Content-Script-Type" content="text/javascript">
		<meta http-equiv="imagetoolbar" content="no">

		
	<!-- <script src="/javascripts/jquery.js"></script> -->
	<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
	<script type="text/javascript" async="" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/ga.js"></script><script src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/jquery-1.6.min.js"></script>
	
	
	<script src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/jquery.textchange.min.js"></script>
	<!-- <script src="/javascripts/plugins/jquery.textchange.js"></script> -->

	<script>
$(document).ready(function(){
	
	$('#exhibita').bind('hastext', function () {
		$('#exhibitaButton').removeClass('disabled').attr('disabled', false);
	});
	
	$('#exhibita').bind('notext', function () {
		$('#exhibitaButton').addClass('disabled').attr('disabled', true);
	});
	
	$('#exhibitb').bind('textchange', function (event, previousText) {
		$('#output').prepend('<p>Text changed from <strong>' + previousText + '</strong> to <strong>' + $(this).val() + '</strong> </p>');
	});
	
	$('#twitter').bind('textchange', function (event, previousText) {
		$('#charactersLeft').html( 140 - parseInt($(this).val().length) );
	});
	
	$('#clearOutput').click(function (event) {
		event.preventDefault();
		$('#output').empty();
	});
	
	var timeout;
	$('#ajaxSave').bind('textchange', function () {
		clearTimeout(timeout);
		$('#ajaxFired').html('<strong>Typing...</strong>');
		var self = this;
		timeout = setTimeout(function () {
			$('#ajaxFired').html('<strong>Saved</strong>: ' + $(self).val());
		}, 1000);
	});
	
	$('#emergencyIntelligenceIncinerator').bind('textchange', function () {
		if ($(this).val().indexOf('companion cube') !== -1) {
			$('#continue').removeClass('disabled').attr('disabled', false);
		} else {
			$('#continue').addClass('disabled').attr('disabled', true);
		}
	});
	
	$('#continue').click(function (event) {
		event.preventDefault();
		if (!$(this).hasClass('disabled')) {
			alert('You euthanized your companion cube quicker then any other user.');
			$('#emergencyIntelligenceIncinerator').val($('#emergencyIntelligenceIncinerator').val().replace('companion cube', '[the charred remains of your dear friend]'));
			$('#continue').addClass('disabled').attr('disabled', true);
		}
	});
	
});
		
		function initZURB(){}
	</script>

		        <style media="print">
    			/*	--------------------------------------------------
	=ZURB Print Styles
	-------------------------------------------------- */
	
	
 /*	--------------------------------------------------
	=Killing the Unneeded Sections
	-------------------------------------------------- */		
	
	
	#adminHeader,
	#ZURBar, 
	div#sidebar,
	ul.tabs li, 
	#site-info div#zurbword, 
	#site-info div#zurbnews,
	#site-info div#footer { display: none !important; }
	
	#site-info div#zurbcontact { border-top: 2px solid #e0e0e0; padding-top: 10px; width: 400px; }
	
	ul.tabs li.current { display: block !important; margin: -7px -30px 0 0; }
	li.current a span { color: #000; background-color: green; }
	
	
	/* Stripping the Blog --------- */
	
	div#content ul.options,
	div.post-header ul.admin, 
	div#pageHeader,
	div#content-sec div,
	div#content-main div.footer,
	div#content-main div#comments { display: none !important; };

	div.column-row div#content-main { width: 20%; }
	
	body#showPage div#content-main div.post { width: 120%; }
	div#content-sec div#aboutZURBlog { display: block !important; width: 70%; margin-left: 80px; }
	
	div.secondary.page-header { display: none !important; }
	
	div#content-main { font-size: 15px; line-height: 17px;}
	
	div.post-header h2 { font-size: 26px; }
	div.body { font-size: 16px; line-height: 19px; }

	body#showPage div#content-main blockquote,
	body#showPage div#content-main blockquote p { color: #555; }
	
	div.vcard ul. div.vcard address, div.vcard p { color: 000; }
	

	

    		</style>
<link href="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/playground.css" media="all" rel="stylesheet" type="text/css">            <style media="all">.header-block { height: 246px;}

.ad-wrap { padding:17px 63px 15px !important;height: 130px;}

ul.nav li#ZURBmenu a {  }
ul.nav li#ZURBmenu a img { display: none !important; }
ul.nav li#ZURBmenu strong { background: transparent url(/playground/zurb-nub.png); }
ul.nav li#ZURBmenu a:hover strong { background-color: none; }
ul.nav li#ZURBmenu a:hover strong img { display: block; }

div#header img {  }
div#header h4 { margin: 0; }
div#header h4 a { float: left; margin: 20px 0 0 15px; padding: 5px 0 1px 14px; color: #777; font-weight: normal; border-left: 1px solid #ddd; }
a.follow-us { background: url(/images/icons/24px/twitter-inset.png) no-repeat 0 center; display: block; float: right; margin: 25px 0 0; padding-left: 30px; line-height: 24px; color: #333; font-size: 14px; }
a.follow-us:hover { color: #555; }
a#followUs { float: right; margin-top: 20px; }
a#getAJob { float: right; margin-top: 20px; margin-right: 20px; }
a#followUs span { background: url(/images/icons/16px/twitter-inset.png) no-repeat 10px 3px; padding-left: 30px; }

div.page-header h2 { letter-spacing: 0; }

div.page-header.playground{-moz-background-clip:border; -moz-background-origin:padding; -moz-background-size:auto auto; background-attachment:scroll; background-color:transparent; background-image:url("/images/playground/robot.jpg"); background-position:99% 40%; background-repeat:no-repeat; height: auto; margin-top:0px; }

/* Quick fix for the playground footer */
div#siteInfo div#aboutPlayground h4 { margin-bottom: 9px; }

div.awesome.box { background: #efefef; margin: 0 0 18px 0; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid #ddd; border-top-color: #ccc; width:200px; }
div.awesome.box div.divider { height: 0; margin: 0 14px 5px 14px; background-color: #ccc; width: 172px; border-bottom: 1px solid #ddd; }

div.awesome.box h4 a { display: block; color: #333; padding: 3px 0 5px 0; width: 100%; font-size: 16px;  }

div.awesome.box li { margin-bottom: 5px; color: #333; text-decoration: none; }
div.awesome.box li a { display: block; width: 100%; color: #333; }
div.awesome.box a:hover { background: #007d9a; color: white; }
div.awesome.box a span { display: block; margin: 0 14px; }

div.awesome.box form input[type="text"] { margin: 0 10px; width: 150px; }

div.currentdemo { color: #888; margin-top: -17px; margin-bottom: 15px; }

div.currentdemo h2 {margin-top: -14px;}

ul.photos.playground.slide li { float:left; height:100px; margin-bottom:0px; margin-left: 20px; margin-right:0; margin-top:0px; position:relative; width:300px;}
ul.photos.playground.slide li p { margin-left: 160px; margin-top: -90px; }
ul.photos.playground.slide li strong { display: block; }


div.currentdemo.right { color: #888; margin-bottom: 0; float: left;  }

div.currentdemo.right h2 {margin-top: }

div.selectorleft {margin-left: -25px; top: 125px; position: absolute; z-index: 2}

div.selectorright {margin-left: 567px; top: 125px; position: absolute; z-index: 2}

div.indicator { position: absolute; margin-left: 545px; margin-top: 0px;}

div.indicator ul li {display: inline;}

p.slideinfo {width: 450px; margin-top: 5px; font-size: 15px;}</style> 

		
		
	<style>
		.disabled { opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=50); cursor: default; }
		.disabled:active { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); }
		.red.button.disabled:hover { background-color: #E33100; }
		
		#output { overflow: auto; border: 1px solid #ddd; height: 150px; padding: 10px; margin-bottom: 10px; -moz-border-radius:2px 2px 2px 2px; }
		#output p { margin-bottom: 5px; border-bottom: 1px solid #eee;}
		
		#charactersLeft { font-size: 22px; font-weight: bold; }
		
		.button { margin-bottom: 10px; }
		.button.green small { color: rgba(255,255,255,0.75); }
		
		input:focus { padding: 4px 5px !important; }
		
		ul.photos.playground { margin-left: -20px; margin-bottom: 0; padding-top: 9px; margin-top: -9px; }
		ul.photos.playground li { float: left; width: 220px; margin: 0 0 0 20px; position: relative; }
		ul.photos.playground img { height: auto; margin-bottom: 9px; background: #fff; }
		ul.photos.playground a { margin: 0; float: none; height: auto; }
		ul.photos.playground a:hover img, 
		img.awesome.image:hover { border-color: rgba(0,182,222,.5); -moz-box-shadow: 0 0 9px rgba(0,182,222,.5); -webkit-box-shadow: 0 0 9px rgba(0,182,222,.5); }
		ul.photos.playground a h4 { color: #007d9a; -webkit-transition: all 0.15s ease-out; }
		ul.photos.playground a:hover h4 { color: #2daebf; }
		ul.photos.playground a.button { float: none; margin: 0 5px 0 0; display: inline-block; }
		ul.photos.playground p { margin-bottom: 9px; }

		ul.photos.playground div.works-in { background: rgba(0,0,0,.25); padding: 5px; position: absolute; top: 125px; left: 5px; width: auto; height: 32px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
		ul.photos.playground li div.works-in img { background: none; padding: 0; float: left; width: auto; height: auto; border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; }
		ul.photos.playground li div.works-in img + img { margin-left: 5px; }
		ul.photos.playground li div.works-in img.halfway { opacity: .5; }
		
		p.lead { margin-top: -9px; }
		
		.divider { margin-top: ; }
		
		ul.photos.playground li ul { margin: 0; }
		ul.photos.playground li li { width: auto; float: none; height: auto; margin: 0; display: block; }
		ul.photos.playground li li a { line-height: 20px; }
	</style>

		
		
			<link rel="icon" href="http://www.zurb.com/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/ads.css"></head>
	
	<body id="textChangeEventPage" class="chrome windows">

		
		
		<div class="platform-bar">
			<div class="container">
				<div class="column-row bar-content no-margin">
					<span class="title four columns"><a href="http://www.zurb.com/expo">ZURBexpo</a></span>
					<ul class="related">
						<li><a href="http://www.zurb.com/blog">ZURBlog</a></li>
						<li><a href="http://www.zurb.com/playground">ZURBplayground</a></li>
						<li><a href="http://www.zurb.com/word">ZURBword</a></li>
						<li><a href="http://www.zurb.com/news">ZURBnews</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="wrapper">
			<div id="container">
				<div id="header">
<!-- 					<a class="follow-us" href="http://www.twitter.com/zurb">Follow us on Twitter here &rarr;</a> -->
					<a class="super white button" id="followUs" href="http://www.twitter.com/zurb"><span>Follow us on Twitter</span></a>
					<a class="super white button" id="getAJob" href="http://www.zurb.com/talent"><span>Join Our Team</span></a>
				
					
						<a href="http://www.zurb.com/" title="ZURB.com"><img alt="ZURB" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/zurb.gif"></a>
					
					
					<h4><a href="http://www.zurb.com/playground">Playground</a></h4>
				</div>
				
				<div id="content">
					
					



<div id="pageHeader">
	<div style="float: left; position: absolute; left: -65px;">
		<script type="text/javascript">  
		tweetmeme_url = 'http://www.zurb.com/playground/jquery-text-change-custom-event';  
		</script> 
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/button.js"></script>
	</div>
		
<div id="zurbAd" class=""><div id="sidebarAd" class="cleanslate">
	<div class="row">
		<div class="seven columns">
			<a href="http://www.campaignmonitor.com/"><img src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/cm-sponsor.png"></a>

		</div>
 		<div class="five columns">
			<ul><h6><a href="http://www.campaignmonitor.com/">Email Marketing</a></h6>
				<li><a href="http://www.campaignmonitor.com/">Send beautiful <br>email newsletters with ease.</a></li>
				<li><a href="http://www.zurb.com/expo"><span class="ad-sponsor">ZURBexpo Sponsor</span></a></li>
			</ul>
		</div>
	</div>
</div>

</div><script id="ZURBsmallAd" data-orientation="" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/ZURBsmallAd.js"></script>
	<h1>jQuery Text Change Event</h1>
	<p>Simple cross browser detection of text changes for input and textarea elements using a jQuery custom event plugin by ZURB <br><a href="http://www.zurb.com/article/370/awesome-jquery-text-change-events">See the blog post to view or add a comment »</a></p>
	<p><small>Plugin Tested in FireFox (3, 3.5, 3.5, Win/OS X), Safari 4, Chrome 5, IE (6, 7, 8) </small></p>
</div>
<br><br>

<h2>Real Time Validation</h2>
<div class="column-row">
	<div class="nine columns">
		<p>It's a common problem, you have a text form that you need to validate client side. It's easy enough to do this
			when the form is submitted but in <em>some</em> cases better to do as they type.</p>
		<p>Imagine how annoying Twitter would be if you had to submit your tweet before it told you how many characters you had left. 
			On the other hand this same immediate validation can be abused if overused. Don't insult the user by
			congratulating them for each and every text field they fill in.</p>
		<p>Implementing this requires binding events to the keyup event, and a couple other events if you want to detect text changes on cut and paste. Even if you're a JavaScript god it's tedious to keeping writing this logic over and over again. Be smart and use the ZURB text change event plugin instead.</p>
	</div>
	<div class="six columns">
		<a href="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/jquery.textchange.min.js" class="super large green button"><span>Download Plugin <small>(0.37 KB)</small></span></a>
		<a href="http://gist.github.com/424774" class="super large secondary button"><span>Source on GitHub</span></a>
	</div>

</div>

<div class="zurb divider "></div>


<h2>Getting Down to Business</h2>
<div class="column-row">
	<div class="nine columns">
		<p>Enough theory, let's get down to implementation. Notice exhibit A to the right, looks like a standard textarea with a disabled save button. Witness the button enable when there is text in the field, and disable when there is not. Moderately impressive right?</p>
		<p>Try copying, pasting, or cutting text with the shortcut keys. OK, try doing that with a right click or the edit menu. Pretty sweet 
			huh? Try all those interactions on twitter.com (hint, they don't support the click or menu interactions).</p>
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/116857fa9daaf8f5e651f786a29b10fe"></script><div onmouseover="document.getElementById(&#39;snipt-15320&#39;).style.display = &#39;block&#39;; return false;" onmouseout="document.getElementById(&#39;snipt-15320&#39;).style.display = &#39;none&#39;; return false;" style="position: relative;">
<div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #d0d0d0">&lt;script</span> <span style="color: #d0d0d0">src=</span><span style="color: #ed9d13">"/javascripts/plugins/jquery.textchange.js"</span><span style="color: #d0d0d0">&gt;&lt;</span><span style="color: #a61717; background-color: #e3d2d2">/script&gt;</span>
</pre></div>

<div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-15320">code hosted by <a href="http://snipt.net/mkelly12/textchange-link" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
</div>

		<p>Download and link up our textchange plugin.</p>
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/75193b1d73e2cb8885139cf1959c9c87"></script><div onmouseover="document.getElementById(&#39;snipt-15319&#39;).style.display = &#39;block&#39;; return false;" onmouseout="document.getElementById(&#39;snipt-15319&#39;).style.display = &#39;none&#39;; return false;" style="position: relative;">
<div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#exhibita'</span><span style="color: #d0d0d0">).bind(</span><span style="color: #ed9d13">'hastext'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#exhibitaButton'</span><span style="color: #d0d0d0">).removeClass(</span><span style="color: #ed9d13">'disabled'</span><span style="color: #d0d0d0">).attr(</span><span style="color: #ed9d13">'disabled'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">false</span><span style="color: #d0d0d0">);</span>
<span style="color: #d0d0d0">});</span>
	
<span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#exhibita'</span><span style="color: #d0d0d0">).bind(</span><span style="color: #ed9d13">'notext'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#exhibitaButton'</span><span style="color: #d0d0d0">).addClass(</span><span style="color: #ed9d13">'disabled'</span><span style="color: #d0d0d0">).attr(</span><span style="color: #ed9d13">'disabled'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">true</span><span style="color: #d0d0d0">);</span>
<span style="color: #d0d0d0">});</span>
</pre></div>

<div style="background-color: rgb(17, 17, 17); color: rgb(208, 208, 208); float: right; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; font-family: Arial, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; position: absolute; bottom: 0px; right: 0px; display: none; " id="snipt-15319">code hosted by <a href="http://snipt.net/mkelly12/exhibita" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
</div>

		<p>The plugin adds the <code>hastext</code> and <code>notext</code> events that you can bind input and textarea elements to.</p>
		<p>The <code>hastext</code> event fires when the element goes from having no text to having text, and the <code>notext</code> event fires when the element goes from having text to being blank. Looking for more advanced validation? Keep reading.</p>
	</div>
	<div class="six columns">
		
		<label>Exhibit A</label>
		<span class="wrap">
			<textarea id="exhibita" type="text" class="medium"></textarea>
		</span>
		<button id="exhibitaButton" class="super red button disabled" disabled="TRUE"><span>Save</span></button>
	</div>
</div>

<div class="zurb divider "></div>

<h2>Detecting Text Changes</h2>
<div class="column-row">
	<div class="nine columns">
		<p>There is a third <code>textchange</code> event that fires whenever the text changes and provides you with the previous value. Give it a try over in Exhibit B.</p>
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/8ebd2cf661571b465f78a1f67e8652ee"></script><div onmouseover="document.getElementById(&#39;snipt-15321&#39;).style.display = &#39;block&#39;; return false;" onmouseout="document.getElementById(&#39;snipt-15321&#39;).style.display = &#39;none&#39;; return false;" style="position: relative;">
<div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#exhibitb'</span><span style="color: #d0d0d0">).bind(</span><span style="color: #ed9d13">'textchange'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">(event,</span> <span style="color: #d0d0d0">previousText)</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#output'</span><span style="color: #d0d0d0">).append(</span><span style="color: #ed9d13">'&lt;p&gt;Text changed from &lt;strong&gt;'</span> <span style="color: #d0d0d0">+</span> 
    <span style="color: #d0d0d0">previousText</span> <span style="color: #d0d0d0">+</span> <span style="color: #ed9d13">'&lt;/strong&gt; to &lt;strong&gt;'</span> <span style="color: #d0d0d0">+</span> <span style="color: #d0d0d0">$(</span><span style="color: #6ab825; font-weight: normal">this</span><span style="color: #d0d0d0">).val()</span> <span style="color: #d0d0d0">+</span> 
    <span style="color: #ed9d13">'&lt;/strong&gt; &lt;/p&gt;'</span><span style="color: #d0d0d0">);</span>
<span style="color: #d0d0d0">});</span>
</pre></div>

<div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-15321">code hosted by <a href="http://snipt.net/mkelly12/exhibitb" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
</div>

	</div>
	<div class="six columns">
		<label>Exhibit B</label>
		<span class="wrap">
			<textarea id="exhibitb" type="text" class="medium"></textarea>
		</span>
		<div id="output">
		</div>
		<button id="clearOutput" class="super button"><span>Clear</span></button>
	</div>
</div>

<div class="zurb divider "></div>

<h2>Twitter Style Validation</h2>
<div class="column-row">
	<div class="nine columns">
		<p>We can implement some simple Twitter like validation with just a single line and our textchange event.</p>
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/3dfec7d8c30699642d994102296ad5ef"></script><div onmouseover="document.getElementById(&#39;snipt-15322&#39;).style.display = &#39;block&#39;; return false;" onmouseout="document.getElementById(&#39;snipt-15322&#39;).style.display = &#39;none&#39;; return false;" style="position: relative;">
<div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#twitter'</span><span style="color: #d0d0d0">).bind(</span><span style="color: #ed9d13">'textchange'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">(event,</span> <span style="color: #d0d0d0">previousText)</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#charactersLeft'</span><span style="color: #d0d0d0">).html(</span> <span style="color: #3677a9">140</span> <span style="color: #d0d0d0">-</span> <span style="color: #24909d">parseInt</span><span style="color: #d0d0d0">($(</span><span style="color: #6ab825; font-weight: normal">this</span><span style="color: #d0d0d0">).val().length)</span> <span style="color: #d0d0d0">);</span>
<span style="color: #d0d0d0">});</span>
</pre></div>

<div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-15322">code hosted by <a href="http://snipt.net/mkelly12/twitter-text-change" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
</div>

	</div>
	<div class="six columns">
		<label>Twitter</label>
		<span class="wrap">
			<textarea id="twitter" type="text" class="medium"></textarea>
		</span>
		<span id="charactersLeft" class="wrap">140</span>
	</div>
</div>

<div class="zurb divider "></div>

<h2>AJAX Save</h2>
<div class="column-row">
	<div class="nine columns">
		<p>With a little more code and <code>setTimeout</code> we can hookup an AJAX call to save a few seconds after the user stops editing.
			The AJAX call is just stubbed out here but you get the idea.</p>
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/3938309f9c1a28f199acca3dff0db6ff"></script><div onmouseover="document.getElementById(&#39;snipt-15323&#39;).style.display = &#39;block&#39;; return false;" onmouseout="document.getElementById(&#39;snipt-15323&#39;).style.display = &#39;none&#39;; return false;" style="position: relative;">
<div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">var</span> <span style="color: #d0d0d0">timeout;</span>
<span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#ajaxSave'</span><span style="color: #d0d0d0">).bind(</span><span style="color: #ed9d13">'textchange'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #d0d0d0">clearTimeout(timeout);</span>
  <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#ajaxFired'</span><span style="color: #d0d0d0">).html(</span><span style="color: #ed9d13">'&lt;strong&gt;Typing...&lt;/strong&gt;'</span><span style="color: #d0d0d0">);</span>
    <span style="color: #6ab825; font-weight: normal">var</span> <span style="color: #d0d0d0">self</span> <span style="color: #d0d0d0">=</span> <span style="color: #6ab825; font-weight: normal">this</span><span style="color: #d0d0d0">;</span>
    <span style="color: #d0d0d0">timeout</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">setTimeout(</span><span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
    <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#ajaxFired'</span><span style="color: #d0d0d0">).html(</span><span style="color: #ed9d13">'&lt;strong&gt;Saved&lt;/strong&gt;: '</span> <span style="color: #d0d0d0">+</span> <span style="color: #d0d0d0">$(self).val());</span>
  <span style="color: #d0d0d0">},</span> <span style="color: #3677a9">1000</span><span style="color: #d0d0d0">);</span>
<span style="color: #d0d0d0">});</span>
</pre></div>

<div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-15323">code hosted by <a href="http://snipt.net/mkelly12/ajax-save" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
</div>

	</div>
	<div class="six columns">
		<label>AJAX Save</label>
		<span class="wrap">
			<textarea id="ajaxSave" type="text" class="medium"></textarea>
		</span>
		<span id="ajaxFired" class="wrap"></span>
	</div>
</div>

<div class="zurb divider "></div>

<h2>Validate Text</h2>
<div class="column-row">
	<div class="nine columns">
		<p>This is a little contrived but maybe you need to ensure that the <a href="http://en.wikipedia.org/wiki/Portal_(video_game)">companion cube</a> is in the emergency intelligence incinerator before 
			allowing the user to continue.</p>
		<script type="text/javascript" src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/00ebaea179ea1eebf9d6ff69f528e76d"></script><div onmouseover="document.getElementById(&#39;snipt-15324&#39;).style.display = &#39;block&#39;; return false;" onmouseout="document.getElementById(&#39;snipt-15324&#39;).style.display = &#39;none&#39;; return false;" style="position: relative;">
<div class="highlight" style="background: #202020"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#emergencyIntelligenceIncinerator'</span><span style="color: #d0d0d0">).bind(</span><span style="color: #ed9d13">'textchange'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
  <span style="color: #6ab825; font-weight: normal">if</span> <span style="color: #d0d0d0">($(</span><span style="color: #6ab825; font-weight: normal">this</span><span style="color: #d0d0d0">).val().indexOf(</span><span style="color: #ed9d13">'companion cube'</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">!==</span> <span style="color: #d0d0d0">-</span><span style="color: #3677a9">1</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
    <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#continue'</span><span style="color: #d0d0d0">).removeClass(</span><span style="color: #ed9d13">'disabled'</span><span style="color: #d0d0d0">).attr(</span><span style="color: #ed9d13">'disabled'</span><span style="color: #d0d0d0">,</span> <span style="color: #6ab825; font-weight: normal">false</span><span style="color: #d0d0d0">);</span>
  <span style="color: #d0d0d0">}</span>
<span style="color: #d0d0d0">});</span>
</pre></div>

<div style="background-color: #111; color: #D0D0D0; float: right; padding: 5px 10px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; font: 11px Arial,Sans-Serif; display: none; position: absolute; bottom: 0; right: 0;" id="snipt-15324">code hosted by <a href="http://snipt.net/mkelly12/companion-cube" style="color: #0084FF; text-decoration: none;">snipt.net</a></div>
</div>

	</div>
	<div class="six columns">
		<label>Emergency Intelligence Incinerator</label>
		<span class="wrap">
			<textarea id="emergencyIntelligenceIncinerator" type="text" class="medium"></textarea>
		</span>
		<button id="continue" class="super button disabled" disabled="TRUE"><span>Continue</span></button>
	</div>
</div>
<br>
<p><small>Copyright ZURB, freely available for distribution under the MIT license.</small></p>


<div style="background: #f4f4f4; margin: 80px -20px 40px; padding: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px;">

<h3>Other Playground Experiments You Might Like</h3>
<br>

<ul class="recent photos playground clearfix">
	<li>
		<a href="http://www.zurb.com/playground/javascript-annotation-plugin">
			<img src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/nutmeg-cropped.jpg">
			<h4>ZURB JavaScript Annotation Plugin</h4>
		</a>
	</li>
	<li>
		<a href="http://www.zurb.com/playground/ajax_upload">
			<img src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/ajax-uploader.png">
			<h4>AJAX Image Upload</h4>
		</a>
	</li>
	<li>
		<a href="http://www.zurb.com/playground/inline-form-labels">
			<img src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/inline-form-labels.jpg">
			<h4>Inline Form Labels</h4>
		</a>
	</li>
	<li>
		<a href="http://www.zurb.com/playground/css-grid-builder">
			<img src="./jQuery Text Change Event - ZURB Playground - ZURB.com_files/grid_builder.png">
			<h4>ZURB CSS Grid Builder</h4>
		</a>
	</li>
</ul>

</div>



				</div>
			</div>
		</div>
		
		
		<script>
			var _gaq = _gaq || [];
		  _gaq.push(['b._setAccount', 'UA-2195009-29']);
		  _gaq.push(['b._trackPageview']);
		</script>
				<script type="text/javascript">
			// This function will be located in: global.js
			if (typeof initZURB == 'function') initZURB();
			
			// This function will be located in: /public/javascripts/layouts/playground.js
			if (typeof initLayout == 'function') initLayout();
		
			// This function will be located in: /public/javascripts/controllers/playground.js
			
			if (typeof textChangeEventPage == 'function'){
				textChangeEventPage();
			}
		</script>
		
		
		  
			<script type="text/javascript">

			  var _gaq = _gaq || [];
			  _gaq.push(['_setAccount', 'UA-2195009-2']);
			  _gaq.push(['_trackPageview']);

			  (function() {
			    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			  })();

			</script>
		
	

		
		<div id="siteInfo">
			<div class="container">
				<div class="column-row">
					<div class="six columns" id="aboutPlayground">
						<h4>Creative Experiments from <strong>ZURB.</strong></h4>
						<p>Welcome to the <a href="http://www.zurb.com/playground">ZURB Playground</a>, creative interaction design tools and experiments by the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.</p>
					</div>
			
					<div class="five columns" id="zurbword">
						<h5>More From the Playground</h5>
						<ul>
							<li><a href="http://www.zurb.com/playground">Playground Home</a></li>
							<li><a href="http://coding.smashingmagazine.com/author/dmitry-dragilev/" rel="nofollow">Our Articles on Smashing Magazine</a></li>
							<li><a href="http://www.zurb.com/blog/topic/implementation">Implementation Articles on the ZURBlog</a></li>
						</ul>
					</div>
			
					<div class="five columns" id="zurbnews">
							<h5>Subscribe to ZURBnews</h5>
	<form action="http://www.zurb.com/newsletter/sign_up" id="newsSubscribe" method="post">
		<div class="wrapper">
			<input class="input-text" id="groupie_email" name="groupie[email]" size="21" type="text" value="Enter your e-mail...">
			<button class="playground" type="submit">Get It</button>
		</div>
		
	</form>
	<p>Get our monthly newsletter, ZURBnews.<br> Check out the <a href="http://www.zurb.com/news" title="Read last month&#39;s edition of ZURBnews">latest news and buzz</a></p>

					</div>
				</div>
			
				<div id="footer">
  <ul>
    <li><a href="http://www.zurb.com/" class="home" title="ZURB.com">Home</a></li>
    <li><a href="http://www.zurb.com/talent" class="talent" title="Talent">Talent</a></li>
    <li><a href="http://www.zurb.com/work" class="work" title="Our Work">Work</a></li>
    <li><a href="http://www.zurb.com/blog" class="blog" title="The ZURBlog">Blog</a></li>
    <li><a href="http://www.zurb.com/playground" class="playground" title="The Playground">Playground</a></li>
    <li><a href="http://www.zurb.com/contact" class="contact" title="Contact Us">Contact</a></li>
    <li class="rss"><a href="http://feeds.feedburner.com/zurb/blog" title="Follow our blog via RSS">Subscribe to Our Blog</a></li>
  </ul>
  
  <p class="copyright">© 1998 - 2012 ZURB. All rights reserved.</p>
</div>
			</div>
		</div>
		<script>
		function initLayout(){
		  // To make the Subscribe to ZURBnews form nicer to use.
		  var newsFormInput = document.getElementById('groupie_email'),
		  defaultNewsFormValue = newsFormInput.value;
		  newsFormInput.onfocus = function(){
		      if (newsFormInput.value == defaultNewsFormValue){
		          newsFormInput.value = '';            
		      }
		  }
		  newsFormInput.onblur = function(){
		      if (newsFormInput.value == ''){
		          newsFormInput.value = defaultNewsFormValue;            
		      }
		  }
		}
		initLayout();
		</script>
</body></html>